<template>
  <el-card>
    <div slot="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <template v-if="$route.params.id">
          <el-breadcrumb-item to="/article">内容管理</el-breadcrumb-item>
          <el-breadcrumb-item >编辑文章</el-breadcrumb-item>
        </template>
        <el-breadcrumb-item v-else>发布文章</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-form label-width="100px" :model="articleForm" :rules="articleRules" ref="formRef">
      <el-form-item label="标题:" prop="title">
        <el-input placeholder="请输入文章标题" v-model="articleForm.title" style="width:400px"></el-input>
      </el-form-item>
      <el-form-item label="频道:" prop="channel_id">
        <GeekChannel v-model="articleForm.channel_id" />
      </el-form-item>

      <el-form-item label="封面:" prop="cover">
        <el-radio-group v-model="articleForm.cover.type" @change="clearImage">
          <el-radio :label="1">单图</el-radio>
          <el-radio :label="3">三图</el-radio>
          <el-radio :label="0">无图</el-radio>
          <el-radio :label="-1">自动</el-radio>
        </el-radio-group>

        <el-upload ref="uploadRef"
        v-if="articleForm.cover.type=== 1 || articleForm.cover.type===3"
        action="" list-type="picture-card" :http-request="uploadImage"
        :limit="parseInt(articleForm.cover.type)"
        multiple :on-remove="removeFile" :file-list="fileList">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="内容:" prop="content">
        <quillEditor @blur="handleBlur" v-model="articleForm.content"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(false)">发布文章</el-button>
        <el-button @click="submit(true)">存入草稿</el-button>
      </el-form-item>
      {{ articleForm }}
    </el-form>
  </el-card>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'PublishPage',
  components: {
    quillEditor
  },
  data () {
    const checkCoverFn = (rule, value, callback) => {
      console.log({ value })
      if (this.articleForm.cover.type === 1 && this.articleForm.cover.images.length === 0) {
        callback(new Error('请上传封面'))
      } else if (this.articleForm.cover.type === 3 && this.articleForm.cover.images.length < 3) {
        callback(new Error('请上传3张封面'))
      } else {
        callback()
      }
    }
    return {
      articleForm: {
        title: '',
        content: '',
        cover: {
          type: 1,
          images: []
        },
        channel_id: 0
      },
      articleRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 30, message: '文章标题长度在3-30个字符', trigger: 'blur' }
        ],
        channel_id: [
          { required: true, message: '请选择频道', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        cover: [
          { validator: checkCoverFn, trigger: 'change' }
        ]

      }
    }
  },
  methods: {
    async uploadImage (obj) {
      const fd = new FormData()
      fd.append('image', obj.file)
      const res = await this.$http.post('/v1_0/upload', fd)
      // console.log(res)
      this.articleForm.cover.images.push(res.data.data.url)
      // 上传后返回一个值给到文件的repsonse
      return res.data.data.url
    },
    clearImage () {
      this.$refs.uploadRef?.clearFiles()
      this.articleForm.cover.images = []
    },
    handleBlur () {
      this.$refs.formRef.validateField('content')
    },
    submit (draft) {
      this.$refs.formRef.validate(async res => {
        if (res) {
          await this.$http.post('/v1_0/mp/articles', this.articleForm, { params: { draft } })
          this.$message.success(draft ? '保存草稿成功' : '发布成功')
          this.$router.push('/article')
        }
      })
    },
    removeFile (file) {
      this.articleForm.cover.images = this.articleForm.cover.images.filter(item => item !== file.response)
    }
  },
  computed: {
    fileList () {
      return this.articleForm.cover.images.map(item => ({ name: item, url: item, response: item }))
    }
  },
  created () {
    // 如果地址有id,就发送获取文章详情请求
    if (this.$route.params.id) {
      this.$http.get(`/v1_0/mp/articles/${this.$route.params.id}`)
        .then(res => {
          console.log(res)
          this.articleForm = res.data.data
          // 此时除了上传组件,其他都已经做了双向绑定
        })
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .ql-editor{
  min-height: 150px;
}
</style>
